/**
 * Copyright 2025 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

#list {
    --spectrum-tabs-item-height: var(--spectrum-tab-item-height-medium);
    --spectrum-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-medium);
    --spectrum-tabs-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-medium);
    --spectrum-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-medium);
    --spectrum-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-medium);
    --spectrum-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-medium);
    --spectrum-tabs-icon-size: var(--spectrum-workflow-icon-size-75);
    --spectrum-tabs-icon-to-text: var(--spectrum-text-to-visual-100);
    --spectrum-tabs-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-medium);
    --spectrum-tabs-color: var(--spectrum-neutral-subdued-content-color-default);
    --spectrum-tabs-color-selected: var(--spectrum-neutral-subdued-content-color-down);
    --spectrum-tabs-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
    --spectrum-tabs-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
    --spectrum-tabs-color-disabled: var(--spectrum-gray-500);
    --spectrum-tabs-font-family: var(--spectrum-sans-font-family-stack);
    --spectrum-tabs-font-style: var(--spectrum-default-font-style);
    --spectrum-tabs-font-size: var(--spectrum-font-size-100);
    --spectrum-tabs-line-height: var(--spectrum-line-height-100);
    --spectrum-tabs-focus-indicator-width: var(--spectrum-focus-indicator-thickness);
    --spectrum-tabs-focus-indicator-border-radius: var(--spectrum-corner-radius-100);
    --spectrum-tabs-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-medium);
    --spectrum-tabs-focus-indicator-color: var(--spectrum-focus-indicator-color);
    --spectrum-tabs-selection-indicator-color: var(--spectrum-neutral-subdued-content-color-down);
    --spectrum-tabs-list-background-direction: top;
    --spectrum-tabs-divider-size: var(--spectrum-border-width-200);
    --spectrum-tabs-divider-border-radius: 1px;
    --spectrum-tabs-animation-duration: var(--spectrum-animation-duration-100);
    --spectrum-tabs-animation-ease: var(--spectrum-animation-ease-in-out);
}

:host([emphasized]) #list {
    --mod-tabs-color-selected: var(--mod-tabs-color-selected-emphasized, var(--spectrum-accent-content-color-default));
    --mod-tabs-color-hover: var(--mod-tabs-color-hover-emphasized, var(--spectrum-accent-content-color-hover));
    --mod-tabs-color-key-focus: var(--mod-tabs-color-key-focus-emphasized, var(--spectrum-accent-content-color-key-focus));
    --mod-tabs-selection-indicator-color: var(--mod-tabs-selection-indicator-color-emphasized, var(--spectrum-accent-content-color-default));
}

:host([direction^="vertical"]) #list {
    --mod-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical, right);
}

:host([direction^="vertical-right"]) #list {
    --mod-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical-right, left);
}

:host([direction^="vertical"]) #list:dir(rtl),
:host([dir="rtl"][direction^="vertical"]) #list {
    --mod-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical, left);
}

:host([direction^="vertical-right"]) #list:dir(rtl),
:host([dir="rtl"][direction^="vertical-right"]) #list {
    --mod-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical, right);
}

:host([compact]) #list {
    --mod-tabs-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-medium));
    --mod-tabs-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-medium));
    --mod-tabs-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-medium));
    --mod-tabs-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-medium));
}

#list {
    z-index: 0;
    vertical-align: top;
    background: linear-gradient(to var(--mod-tabs-list-background-direction, var(--spectrum-tabs-list-background-direction)), var(--highcontrast-tabs-divider-background-color, var(--mod-tabs-divider-background-color, var(--spectrum-tabs-divider-background-color))) 0 var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)), transparent var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)));
    margin: 0;
    padding-block: 0;
    display: flex;
    position: relative;
}

::slotted([selected]:not([slot])) {
    color: var(--highcontrast-tabs-color-selected, var(--mod-tabs-color-selected, var(--spectrum-tabs-color-selected)));
}

::slotted([disabled]:not([slot])) {
    cursor: default;
    color: var(--highcontrast-tabs-color-disabled, var(--mod-tabs-color-disabled, var(--spectrum-tabs-color-disabled)));
}

#selection-indicator {
    background-color: var(--highcontrast-tabs-selection-indicator-color, var(--mod-tabs-selection-indicator-color, var(--spectrum-tabs-selection-indicator-color)));
    z-index: 0;
    transition: transform var(--mod-tabs-animation-duration, var(--spectrum-tabs-animation-duration)) var(--mod-tabs-animation-ease, var(--spectrum-tabs-animation-ease));
    transform-origin: 0 0;
    border-radius: var(--mod-tabs-divider-border-radius, var(--spectrum-tabs-divider-border-radius));
    position: absolute;
    inset-inline-start: 0;
}

:host([direction^="horizontal"]) #list {
    align-items: center;
}

:host([direction^="horizontal"]) #list ::slotted(:not([slot])) {
    vertical-align: top;
}

:host([direction^="horizontal"]) ::slotted(:not(:first-child)) {
    margin-inline-start: var(--mod-tabs-item-horizontal-spacing, var(--spectrum-tabs-item-horizontal-spacing));
}

:host([direction^="horizontal"]) #list #selection-indicator {
    block-size: var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size));
    position: absolute;
    inset-block-end: 0;
}

:host([direction^="horizontal"][compact]) #list {
    box-sizing: initial;
    align-items: end;
}

:host([quiet]) #list {
    background: none;
    border-color: #0000;
    display: inline-flex;
}

:host([quiet]) #selection-indicator {
    padding-inline-start: var(--mod-tabs-start-to-item-quiet);
}

:host([direction^="vertical"]) #list,
:host([direction^="vertical-right"]) #list {
    flex-direction: column;
    padding: 0;
    display: inline-flex;
}

:host([direction^="vertical-right"][quiet]) #list,
:host([direction^="vertical"][quiet]) #list {
    border-color: #0000;
}

:host([direction^="vertical"]) #list ::slotted(:not([slot])),
:host([direction^="vertical-right"]) #list ::slotted(:not([slot])) {
    block-size: var(--mod-tabs-item-height, var(--spectrum-tabs-item-height));
    line-height: var(--mod-tabs-item-height, var(--spectrum-tabs-item-height));
    margin-block-end: var(--mod-tabs-item-vertical-spacing, var(--spectrum-tabs-item-vertical-spacing));
    margin-inline-start: var(--mod-tabs-start-to-edge, var(--spectrum-tabs-start-to-edge));
    margin-inline-end: var(--mod-tabs-start-to-edge, var(--spectrum-tabs-start-to-edge));
    padding-block: 0;
}

:host([direction^="vertical"]) #list ::slotted(:not([slot])):before,
:host([direction^="vertical-right"]) #list ::slotted(:not([slot])):before {
    inset-inline-start: calc(var(--mod-tabs-focus-indicator-gap, var(--spectrum-tabs-focus-indicator-gap)) * -1);
}

:host([direction^="vertical"]) #list #selection-indicator,
:host([direction^="vertical-right"]) #list #selection-indicator {
    inline-size: var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size));
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
}

:host([direction^="vertical-right"]) #list #selection-indicator {
    inset-inline: auto 0;
}

@media (forced-colors: active) {
    #list {
        --highcontrast-tabs-divider-background-color: var(--spectrum-gray-500);
        --highcontrast-tabs-selection-indicator-color: Highlight;
        --highcontrast-tabs-focus-indicator-color: CanvasText;
        --highcontrast-tabs-focus-indicator-background-color: Highlight;
        --highcontrast-tabs-color: ButtonText;
        --highcontrast-tabs-color-hover: ButtonText;
        --highcontrast-tabs-color-selected: HighlightText;
        --highcontrast-tabs-color-key-focus: ButtonText;
        --highcontrast-tabs-color-disabled: GrayText;
        forced-color-adjust: none;
    }

    #list ::slotted([selected]:not([slot])):before {
        background-color: var(--highcontrast-tabs-focus-indicator-background-color);
    }

    :host([direction^="vertical"][compact]) #list #list ::slotted(:not([slot])):before {
        block-size: 100%;
        inset-block-start: 0;
    }

    :host([quiet]) #list {
        background: linear-gradient(to var(--mod-tabs-list-background-direction, var(--spectrum-tabs-list-background-direction)), var(--highcontrast-tabs-divider-background-color, var(--mod-tabs-divider-background-color, var(--spectrum-tabs-divider-background-color))) 0 var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)), transparent var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)));
    }
}
